<template>
    <div>
        <!--   面包屑导航   -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!--   卡片视图     -->
        <el-card>
            <!--   添加角色按钮     -->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addCate">添加分类</el-button>
                </el-col>
            </el-row>
            <!--   表格区     -->
            <tree-table class="tree_table" :data="cateList" :columns="columns" show-index index-text="#" :show-row-hover="false" :selection-type="false" :expand-type="false" border>
                <!--   是否有效     -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted===false"></i>
                    <i class="el-icon-error" v-else style="color: red"></i>
                </template>
                <!--   排序     -->
                <template slot="order" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                    <el-tag type="danger" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
                    <el-tag type="warning" size="mini" v-else>三级</el-tag>
                </template>
                <!--   操作     -->
                <template slot="opt" slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </tree-table>
            <!--   分页区     -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 3, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--   添加分类对话框   -->
        <el-dialog
                title="添加分类"
                :visible.sync="dialogVisible"
                width="50%" @close="closeDialogVisible">
            <el-form :model="addRuleForm" :rules="addRuleFormRules" ref="addRuleFormRef" label-width="100px">
                <el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="addRuleForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类：">
                    <!--  级联选择器。options是绑定的数据源。props是定义的规则。  -->
                    <el-cascader
                            style="width: 100%"
                            expand-trigger="hover"
                            v-model="modelCascader"
                            :options="parentCateList"
                            :props="propsCascader"
                            @change="changeCascader" clearable></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddCate">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "cate",
        created() {
            this.getCateList()
        },
        data(){return{
            //获取商品分类的请求条件
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            //商品分类信息
            cateList:[],
            //商品的总条数
            total:0,
            //表格列显示的值
            columns:[{
                label:"分类名称",
                prop:"cat_name"
            },{
                label:"是否有效",
                type:'template',
                template:'isok'
            },{
                label:"排序",
                type:'template',
                template:'order'
            },{
                label:"操作",
                type:'template',
                template:'opt'
            }],
            //添加分类对话框
            dialogVisible:false,
            //添加分类表单绑定的数据
            addRuleForm:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            //添加分类的表单规则
            addRuleFormRules:{
                cat_name:[{ required: true, message: '请输入分类名称', trigger: 'blur' }]
            },
            //获取对话框的父级数据
            parentCateList:[],
            //级联选择器的规则
            propsCascader:{
                value:'cat_id',
                label:'cat_name',
                children:"children"
            },
            //级联选择器双向绑定的数据
            modelCascader:[]
        }},
        methods:{
            async getCateList(){
                var {data:res}=await this.$http.get('categories',{params:this.queryInfo})
                if (res.meta.status!==200)return this.$message.error('商品分类信息获取失败')
                this.total=res.data.total
                this.cateList=res.data.result
            },
            //监听分页pageSize的改变
            handleSizeChange(newSize){
                this.queryInfo.pagesize=newSize
                this.getCateList()
            },
            //监听分页pageNum的改变
            handleCurrentChange(newNum){
                this.queryInfo.pagenum=newNum
                this.getCateList()
            },
            //添加分类
            addCate(){
                this.getParentCateList()
                this.dialogVisible=true
            },
            //获取父级分类的数据
            async getParentCateList(){
                var {data:res}=await this.$http.get('categories',{params:{type:2}})
                if(res.meta.status!==200)return this.$message.error('父级数据获取失败')
                this.parentCateList=res.data
            },
            //获取级联选择器改变后选中的值
            changeCascader(){
                var num=this.modelCascader.length
                if(num>0){
                    //设置id
                    this.addRuleForm.cat_pid=this.modelCascader[num-1]
                    //设置level
                    this.addRuleForm.cat_level=num
                    return
                }else {
                    this.addRuleForm.cat_pid=0
                    this.addRuleForm.cat_level=0
                }

            },
            //提交分类信息
            AddCate(){
                this.$refs.addRuleFormRef.validate(async vaild=>{
                    if (!vaild)return
                    const {data:res}=await this.$http.post('categories',this.addRuleForm)
                    if(res.meta.status!==201)return this.$message.error('添加数据失败')
                    this.$message.success('添加数据成功')
                    this.getCateList()
                    this.dialogVisible=false
                })
            },
            //关闭添加分类页面对话框
            closeDialogVisible(){
                this.$refs.addRuleFormRef.resetFields()
                this.addRuleForm.cat_pid=0
                this.addRuleForm.cat_level=0
                this.modelCascader=[]
            }
        }
    }
</script>

<style lang="less" scoped>
.tree_table{
    margin-top: 15px;
    margin-bottom: 15px;
}
</style>